<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>查询单号</title>
    <style>
      .sanjiao {
        position: absolute;
        top: 26px;
        left: 82px;
        width: 0;
        height: 0;
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid #ff8500;
        visibility: hidden;
      }
      .appear {
        position: absolute;
        top: 38px;
        left: 7px;
        height: 25px;
        width: 200px;
        border-radius: 5px;
        background-color: #ff8500;
        color: white;
        font-size: 18px;
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <input type="search" />
    <div class="sanjiao"></div>
    <div class="appear"></div>
    <script>
      var searchbar = document.querySelector("input");
      var div = document.querySelector(".appear");
      var sanjiao = document.querySelector(".sanjiao");
      searchbar.addEventListener("keyup", function (e) {
        if (this.value !== "") {
          sanjiao.style.visibility = "visible";
          div.style.visibility = "visible";
          div.innerHTML = this.value;
        } else {
          sanjiao.style.visibility = "hidden";
          div.style.visibility = "hidden";
        }
      });
      searchbar.addEventListener("blur", function () {
        sanjiao.style.visibility = "hidden";
        div.style.visibility = "hidden";
      });
      searchbar.addEventListener("focus", function () {
        if (this.value) {
          sanjiao.style.visibility = "visible";
          div.style.visibility = "visible";
        }
      });
    </script>
  </body>
</html>
